import { ChartLineIcon, ListFilterIcon } from "lucide-react";
import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { PassedTrendingTooltip } from "./chart-tooltip";

const data = {
  start: 1752080015446,
  order: 0,
  passed: 59.5,
  skipped: 10.5,
  failed: 10,
  broken: 10,
  unknown: 10,
};

function randomize(value: number, maxDiff = 10.5) {
  const diff = (Math.random() - 0.5) * maxDiff * 2;
  return Number((value + diff).toFixed(2));
}

const newDataWithNoise: {
  start: number;
  order: number;
  passed: number;
  skipped: number;
  failed: number;
  broken: number;
  unknown: number;
}[] = [];

let currentTimestamp = data.start;

for (let i = 0; i < 60; i++) {
  const passed = randomize(data.passed);
  const skipped = randomize(data.skipped);
  const failed = randomize(data.failed);
  const broken = randomize(data.broken);
  const unknown = Number((100 - passed - skipped - failed - broken).toFixed(2));

  newDataWithNoise.push({
    start: currentTimestamp,
    order: i + 1,
    passed,
    skipped,
    failed,
    broken,
    unknown,
  });

  currentTimestamp += 60000 * 60 * 24;
}

export function PassedTrending() {
  return (
    <div className="flex h-full flex-col rounded-lg border bg-card text-card-foreground shadow-sm">
      <div className="flex items-center justify-between border-b px-4 py-2">
        <div className="flex items-center gap-2 text-sm">
          <ChartLineIcon className="size-4 text-primary" />
          <span className="font-semibold">Trending</span>
        </div>
        <Popover>
          <PopoverTrigger asChild>
            <ListFilterIcon
              size={16}
              aria-hidden="true"
              className="hover:cursor-pointer"
            />
          </PopoverTrigger>
          <PopoverContent className="w-32 p-2" align="end">
            <div className="grid gap-2">
              <div className="flex items-center gap-2">
                <Checkbox id="passed" defaultChecked />
                <Label htmlFor="passed">passed</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="failed" />
                <Label htmlFor="failed">failed</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="skipped" />
                <Label htmlFor="skipped">skipped</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="broken" />
                <Label htmlFor="broken">broken</Label>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox id="unknown" />
                <Label htmlFor="unknown">unknown</Label>
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </div>
      <div className="h-full p-4">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart
            accessibilityLayer
            data={newDataWithNoise}
            margin={{
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            }}
          >
            <CartesianGrid strokeDasharray="4 4 2 4" stroke="var(--accent)" />
            <Tooltip content={<PassedTrendingTooltip />} />
            <Line
              dataKey="passed"
              stroke="var(--primary)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
